<template>
 <el-main>
  <div class="menmuTitle">
   <h1 @click="Withdrawal"><i class="el-icon-back"></i>{{ $t('user.products.title') }}</h1>

   <el-select v-model="ruleForm.state" :placeholder="$t('common.tips.t9')">
    <el-option
     v-for="item in options"
     :key="item.id"
     :label="item.name"
     :value="item.id">
    </el-option>
   </el-select>
  </div>

  <div class="box">
   <div class="table" v-if="list.length > 0">
    <el-table :data="list">
     <el-table-column prop="time" :label="$t('user.products.t1')" width="180" align="center"></el-table-column>
     <el-table-column prop="name" :label="$t('user.products.t2')" width="100" align="center"></el-table-column>
     <el-table-column prop="price" :label="$t('user.products.t3')" align="center"></el-table-column>
     <el-table-column prop="days" :label="$t('user.products.t4')" align="center"></el-table-column>
     <el-table-column prop="rate" :label="$t('user.products.t5')" align="center"></el-table-column>
     <el-table-column prop="revenuePrice" :label="$t('user.products.t6')" align="center"></el-table-column>
     <el-table-column prop="subPrice" :label="$t('user.products.t7')" align="center"></el-table-column>
    </el-table>
   </div>
   <div class="empty" v-else>No Data…</div>
  </div>
 </el-main>
</template>

<script>
export default {
 name: "Products",
 data: () => ({
  options: [],

  ruleForm: {
   state: '',
   pageSize: 10,
   pageNum: 1,
  },

  total: 0,

  list: [],
 }),
 created() {
  this.onLang()

  this.tabList()
 },
 methods: {
  // 监听语言切换
  onLang () {
   const arr = [this.$t('user.products.list1'), this.$t('user.products.list2'), this.$t('user.products.list3'), this.$t('user.products.list4')]

   arr.forEach((item, index) => {
    if (index === 0) {
     this.options.push({
      name: item,
      id: ''
     })
    } else {
     this.options.push({
      name: item,
      id: item
     })
    }
   })
  },

  // 初始数据
  tabList() {
   this.$post(this.$address.customer, this.ruleForm).then(res => {
    this.list = res.data
   })
  },

  // 充提币
  Withdrawal() {
   this.$router.push({
    path: '/Details'
   })
  },

  // 切换页面条数
  pageTotal(e) {
   this.ruleForm.pageSize = e;
   this.ruleForm.pageNum = 1;
   this.tabList()
  },
  // 跳转
  pageNum(e) {
   this.ruleForm.pageNum = e;
   this.tabList()
  },
 },
 watch: {
  '$i18n.locale'(a, b) {
   this.onLang()
  },
  'ruleForm.state' (a, b) {
   this.tabList()
  }
 }
}
</script>

<style scoped lang="scss">
.el-main {
 .menmuTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  h1 {
   font-size: 20px;
   font-weight: bold;
   color: #002445;
   position: relative;
   padding-bottom: 10px;
   cursor: pointer;

   i {
    font-weight: bold;
    color: #000;
    margin-right: 15px;
   }

   &:after {
    display: block;
    content: "";
    width: 140px;
    height: 2px;
    background: #0d4fa5;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 4px;
   }
  }

  .el-select {
   max-width: 130px;

   /deep/ .el-input {
    .el-input__inner {
     color: #002445;
     background-color: #f5faff;
     font-weight: bold;
    }
   }
  }
 }

 .box {
  display: flex;
  flex-direction: column;
  height: 1%;
  flex: 1 1 auto;

  .empty {
   margin: auto;
   text-align: center;
   color: #b3bdc7;
   font-size: 20px;

   &:before {
    content: "";
    display: block;
    width: 130px;
    height: 130px;
    background: url('../../../assets/empty.png');
    background-size: 100% 100%;
    position: relative;
    margin: 0 auto 10px;
    left: 10px;
    opacity: .6;
   }
  }
 }
}
</style>
